<template>
    <nav class="navbar">
        <router-link :to="editUserLink" class="nav-item"><el-icon :size="15"><User /></el-icon>我的</router-link>
        <router-link to="/user_home" class="nav-item">首页</router-link>
        <router-link to="/user_orderlist" class="nav-item">我的订单</router-link>
        <router-link to="/user_starInfo" class="nav-item">我的收藏</router-link>
        <router-link to="/user_message" class="nav-item"><el-icon :size="15"><Bell /></el-icon>消息列表</router-link>
        <router-link to="/" class="nav-item" @click="logout">退出登录</router-link>
    </nav>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
    name: 'NavigationBar',
    computed: {
        ...mapState({
            userID: state => state.user.id  // 从 Vuex store 中获取用户 ID
        }),
        editUserLink() {
            return `/edit_user/${this.userID}`;
        }
    },
    methods: {
        ...mapActions(['logout']),
        logout() {
            this.logout('user'); 
        }
    }
}
</script>

<style scoped>
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.nav-item {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.nav-item:hover {
    background-color: #e0f7fa;
    color: #00796b;
}
</style>
